<!-- 分类列表  -->
<template>
  <div class="category-list">
    <CategoryHeader :flag="flag" @changeCateStyle="listStyleFn"/>
    <div class="list-wrap" v-infinite-scroll="loadMore" infinite-scroll-distance="10">
      <div class="list-tabs">
        <ul>
          <li
            :class="activeIndex==index?'active':''"
            v-for="(list,index) in listTabs"
            :key="list.id"
            @click="changeListTabs(index,list.up,list.sort)"
          >
            {{list.title}}
            <i
              :class="!list.up?'iconfont icon-sanjiao':'iconfont icon-xiaosanjiaoup'"
              v-show="list.showIcon"
            ></i>
          </li>

          <li class="cate" @click="showMaskFn">
            <i class="iconfont icon-shaixuan"></i>筛选
          </li>
        </ul>
      </div>
      <div :class="{'change-cate-list':changeStyleFlag}">
        <List :lists="lists"/>
      </div>
    </div>

    <!-- 点击筛选出现的动画蒙版 -->
    <transition name="hg">
      <div class="mask" v-if="showMask" @click="hideMashFn">
        <div class="content" @click.stop="showMaskFn">
          <div class="bg">
            <h2>价格区间</h2>
            <div class="price-wrap">
              <input type="text" v-model="min" placeholder="最低价">—
              <input type="text" v-model="max" placeholder="最高价">
            </div>
            <h2>品牌</h2>
            <ul class="brand">
              <li
                v-for="brand in brandList"
                :key="brand.id"
                @click="selectBrandFn(brand.id)"
                :class="{active:brandId.includes(brand.id)}"
              >{{brand.title}}</li>
            </ul>
          </div>
          <div class="mask-footer">
            <div class="reset">重置</div>
            <div class="ok" @click.stop="priceSearchFn">确定</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import CategoryHeader from "./CategoryHeader";
import List from "@/views/Home/components/HomeList";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    CategoryHeader,
    List
  },
  data() {
    //这里存放数据
    return {
      flag: true,
      activeIndex: 0,
      listTabs: [
        {
          id: 1,
          title: "综合",
          showIcon: true,
          up: false,
          sort: "goods_id"
        },
        {
          id: 2,
          title: "新品",
          showIcon: false,
          up: false,
          sort: "last_update"
        },
        {
          id: 3,
          title: "销量",
          showIcon: false,
          up: false,
          sort: "sales_volume"
        },
        {
          id: 4,
          title: "价格",
          showIcon: true,
          up: false,
          sort: "shop_price"
        }
      ],
      page: 0,
      size: 10,
      order: "desc",
      sort: "goods_id",
      min: "",
      max: "",
      showMask: false,
      brandList: [
        {
          id: 139,
          title: "飞科"
        },
        {
          id: 100001,
          title: "飞利浦"
        }
      ],
      brandId: [],
      changeStyleFlag: false
    };
  },
  //方法集合
  methods: {
    changeListTabs(index, icon, sort) {
      this.page = 1;
      this.activeIndex = index;
      if (this.listTabs[index].showIcon) {
        this.listTabs[index].up = !icon;
        //desc  降序排列   asc升序排列
        //三角向下 icon=false  降序排列desc    向上 icon=true 升序排列asc
        if (icon) {
          this.order = "desc";
        } else {
          this.order = "asc";
        }
      }

      console.log(icon);

      this.sort = sort;
      this.$store.state.homeCoodsListDatas = [];

      this.getGoodsList();
    },
    getGoodsList() {
      this.$store.dispatch("actChangeHomeCoodsListDatas", {
        cat_id: this.$route.params.cat_id,
        page: this.page,
        size: this.size,
        order: this.order,
        sort: this.sort,
        min: this.min,
        max: this.max,
        brand: this.brandId
      });
    },
    showMaskFn() {
      this.showMask = true;
    },
    hideMashFn() {
      this.showMask = false;
    },
    priceSearchFn() {
      this.getGoodsList();
      this.showMask = false;
    },
    selectBrandFn(id) {
      this.brandId.push(id);
    },
    listStyleFn(data) {
      console.log(data);
      this.changeStyleFlag = data;
    },
    loadMore() {
      console.log("加载更多");
      this.page++;
      this.getGoodsList();
    }
  },
  computed: {
    lists() {
      let newLists = this.$store.state.homeCoodsListDatas.map(item => {
        return {
          goods_thumb: item.goods_thumb,
          title: item.goods_name,
          goods_id: item.goods_id,
          shop_price: item.shop_price
        };
      });
      return newLists;
    }
  },
  mounted() {
    // this.getGoodsList();
    console.log(this.$route.params);
  },
  destroyed() {
    console.log("组件销毁了");
    this.$store.state.homeCoodsListDatas = [];
  }
};
</script>
<style lang="less">
.hg-enter,
.hg-leave-to {
  transform: translateX(100%);
}

.hg-enter-active,
.hg-leave-active {
  transition: all 0.5s linear;
}
.list-wrap {
  .list-tabs {
    width: 100%;
    height: 4.4rem;
    background: #fff;
    border-top: 1px solid #efefef;
    margin-top: 4.4rem;
    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 4.4rem;
      line-height: 4.4rem;
      padding: 0;
      li {
        flex: 1;
        text-align: center;
        font-size: 1.4rem;
        i {
          font-size: 2.2rem;
        }
      }
      .active {
        color: #f55;
      }
      .cate {
        i {
          font-size: 1.6rem;
        }
      }
    }
  }
  .change-cate-list {
    .home-list {
      ul {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 100%;
          margin-bottom: 1rem;
          background: #fff;
          border-radius: 1rem;
          display: flex;
          img {
            width: 9rem;
            height: 9rem;
            margin-top: 1rem;
            margin-left: 1rem;
          }
          .title {
            font-size: 1.4rem;
            width: 90%;
            height: 4rem;
            line-height: 2rem;

            // 多行文本出现省略号
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .price {
            font-size: 2rem;
            color: #f55;
            text-align: left;
            line-height: 4rem;
            margin-left: 1rem;
            &::before {
              content: "￥";
            }
          }
        }
      }
    }
  }
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  .content {
    width: 90%;
    background: #efefef;
    height: 100%;
    position: absolute;
    right: 0;
    .bg {
      background: #fff;
    }
    h2 {
      font-size: 1.6rem;
      height: 4.4rem;
      line-height: 4.4rem;
      text-indent: 1rem;
    }
    .price-wrap {
      width: 80%;
      margin-left: 10%;
      display: flex;
      line-height: 4.4rem;
      padding-bottom: 1rem;
      input {
        width: 50%;
        height: 4.4rem;
        text-align: center;
        border-radius: 2rem;
        background: #efefef;
      }
    }
    .brand {
      display: flex;
      justify-content: flex-start;
      margin-left: 1%;
      flex-wrap: wrap;
      li {
        width: 23%;
        height: 4.4rem;
        text-align: center;
        background: #efefef;
        line-height: 4.4rem;
        border-radius: 2rem;
        margin: 0rem 0 1rem 0;
        font-size: 1.4rem;
      }
      .active {
        background: red;
        color: #fff;
      }
    }
    .mask-footer {
      width: 100%;
      height: 6.4rem;
      display: flex;
      position: absolute;
      bottom: 0;
      justify-content: space-around;
      background: #fff;
      > div {
        width: 40%;
        height: 4.4rem;
        margin-top: 1rem;
        background: #efefef;
        text-align: center;
        line-height: 4.4rem;
        font-size: 1.4rem;
        border-radius: 2rem;
        border: 1px solid #f55;
      }
      .ok {
        background: #f55;
        color: #fff;
      }
    }
  }
}
</style>